<template>
  <div>
    <main class="main">
      <div class="callBack">
        <div></div>
      </div>
      <div class="subject">
        <div class="navLeft">
          <div class="centerBox">
            <currentHeader :headerTitle="'探测器'"></currentHeader>
            <div class="centerList">
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/controllerNum.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${detectorOneList[0].name}(个)` }}</span>
                      <span class="contentNumber">{{ detectorOneList[0].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ detectorOneList[0].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ offLineNumber.otherCount0 }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/liquidLevel.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${detectorOneList[1].name}(个)` }}</span>
                      <span class="contentNumber">{{ detectorOneList[1].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ detectorOneList[1].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ offLineNumber.otherCount1 }}</span>
                    </div>
                  </div>

                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/sensor.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${detectorOneList[2].name}(个)` }}</span>
                      <span class="contentNumber">{{ detectorOneList[2].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ detectorOneList[2].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ offLineNumber.otherCount2 }}</span>
                    </div>
                  </div>

                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/temperatureSensor.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${detectorOneList[3].name}(个)` }}</span>
                      <span class="contentNumber">{{ detectorOneList[3].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ detectorOneList[3].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ offLineNumber.otherCount3 }}</span>
                    </div>
                  </div>

                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/humiditySensor.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${detectorOneList[4].name}(个)` }}</span>
                      <span class="contentNumber">{{ detectorOneList[4].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ detectorOneList[4].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ offLineNumber.otherCount4 }}</span>
                    </div>
                  </div>

                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/temperatureHumiditySensor.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${detectorOneList[5].name}(个)` }}</span>
                      <span class="contentNumber">{{ detectorOneList[5].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ detectorOneList[5].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ offLineNumber.otherCount5 }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="centerFooter">
            <currentHeader :headerTitle="'探测器'"></currentHeader>
            <div class="centerList">
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/regulatingAirValve.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${windList[0].name}(个)` }}</span>
                      <span class="contentNumber">{{ windList[0].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ windList[0].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ windOffLineNumber.otherCount5 }}</span>
                    </div>
                  </div>

                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/liquidLevel.png"
                         alt="" />
                  </div>
                  <div class="flexBox">
                    <div class="contentText">
                      <span class="contentTitle">{{ `${windList[1].name}(个)` }}</span>
                      <span class="contentNumber">{{ windList[1].num }}</span>
                    </div>
                    <div class="contentText">
                      <span class="online">在线(个)</span>
                      <span class="onlineNum">{{ windList[1].online.split(",").length }}</span>
                    </div>
                    <div class="contentText">
                      <span class="offLine">离线(个)</span>
                      <span class="offLineNum">{{ windOffLineNumber.otherCount1 }}</span>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="controlMethod">
            <div class="centerTop general">
              <div class="topText">设备监测数值</div>
              <div class="controlMethodInfo">
                <span class="infoText">详情</span>
                <div class="img">
                </div>
                <!-- <img src="../../assets/img/lightUp/childInfo.png"
                     alt="" /> -->
              </div>
            </div>
            <div class="numberContent"
                 v-infinite-scroll="load"
                 style="overflow: auto"
                 :infinite-scroll-immediate="true">
              <div class="titleBox">
                <div v-for="(item, index) in tableTitleList"
                     :key="index"
                     :class="[
                    { temperature: index === 0 },
                    { generalBntStyle: index !== 0 && index !== tableTitleList.length - 1 },
                    { tvoc: index === tableTitleList.length - 1 }
                  ]"
                     @click="switchover(index)"
                     :style="{
                    background: tableControl === index ? 'rgba(90, 255, 255, 0.3)' : 'rgba(90, 255, 255, 0.1)',
                    color: tableControl === index ? '#fff' : '#86949c'
                  }">
                  {{ item }}
                </div>
                <!-- <div class="temperature">温度</div>
                <div class="generalBntStyle">湿度</div>
                <div class="generalBntStyle">甲醛</div>
                <div class="generalBntStyle">CO2</div>
                <div class="tvoc">TVOC</div> -->
              </div>
              <div class="tableTitle">
                <span>设备名称</span>
                <span>设备状态</span>
                <span>监测值</span>
              </div>
              <div class="tableList"
                   v-for="(item, index) in tableList"
                   :key="index"
                   :style="{'backgroundColor': (index+1)%2 !== 0 ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)'}">
                <div class="tableListName">{{ item.name }}</div>
                <div class="tableListOnline">
                  {{ item.status }}
                </div>
                <div @click="lookCut(index)"
                     :class="[
                    {
                      lookOnline: presentLook === index
                    },
                    {
                      lookOffline: presentLook !== index
                    }
                  ]">
                  查看
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="navRight"></div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="detect">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  getDetectorList,
  getDetectorOfflineNumber,
  getEquipmentList,
  getWindList,
  getWindOfflineNumber,
} from '../../api/modules/LightingRequest/light'
import currentHeader from '../../components/CurrentHeader.vue'

const route = useRoute()
/* 第一个探测器列表 */
const detectorOneList = ref<Array<any>>([
  {
    name: '',
    num: '',
    online: '',
  },
  {
    name: '',
    num: '',
    online: '',
  },
  {
    name: '',
    num: '',
    online: '',
  },
  {
    name: '',
    num: '',
    online: '',
  },
  {
    name: '',
    num: '',
    online: '',
  },
  {
    name: '',
    num: '',
    online: '',
  },
]) // 第一个探测器列表数据
const offLineNumber = ref<any>({}) // 离线数量
const getDetectorOneList = async () => {
  // 智能开关 列表请求
  const entityCode = route.params.entityCode || ''
  const entityType = route.params.entityType || ''
  const equipTypeCodes = route.params.equipTypeCodes || ''
  const res = await getDetectorList({
    entityCode,
    entityType,
    equipTypeCodes,
  })
  if (res.data.code === '0') {
    detectorOneList.value = res.data.data.data
    let onlineList = ''
    res.data.data.data.forEach((element: any) => {
      onlineList += element.online + ','
    })
    getOfflineNum(onlineList, 'online')
  }
}
const getOfflineNum = async (tagnames: any, startSign: string) => {
  // 获取离线个数 请求
  const res = await getDetectorOfflineNumber({
    tagnames: JSON.stringify(tagnames),
    startSign: JSON.stringify(startSign),
  })
  if (res.data.code === '0') {
    offLineNumber.value = res.data.data
  }
}

/* 风阀列表 */
const windList = ref<Array<any>>([
  // 风阀列表数据
  {
    name: '',
    num: '',
    online: '',
  },
  {
    name: '',
    num: '',
    online: '',
  },
])
const windOffLineNumber = ref<any>({}) // 风阀列表 离线数量
const getWindLists = async () => {
  // 智能开关 列表请求
  const entityCode = route.params.entityCode || ''
  const entityType = route.params.entityType || ''
  const equipTypeCodes = route.params.equipTypeCodes || ''
  const res = await getWindList({
    entityCode,
    entityType,
    equipTypeCodes,
  })
  if (res.data.code === '0') {
    windList.value = res.data.data.data
    let onlineList = ''
    res.data.data.data.forEach((element: any) => {
      onlineList += element.online + ','
    })
    getWindOfflineNum(onlineList, 'online')
  }
}
const getWindOfflineNum = async (tagnames: any, startSign: string) => {
  // 获取离线个数 请求
  const res = await getWindOfflineNumber({
    tagnames: JSON.stringify(tagnames),
    startSign: JSON.stringify(startSign),
  })
  if (res.data.code === '0') {
    windOffLineNumber.value = res.data.data
  }
}

/* 底部选项卡 */
const tableControl = ref<number>(0) // 用于切换 table选项卡
const tableTitleList = ref<Array<any>>(['温度', '湿度', '甲醛', 'CO2', 'TVOC'])
const tableList = ref<Array<any>>([]) // 设备监测数值列表
const pageSize = ref<Number>(1)
const pageNum = ref<Number>(6)
const getEquipmentLists = async (): Promise<void> => {
  // 获取 设备监测数值列表
  const res = await getEquipmentList({
    pageSize: pageSize.value,
    pageNum: pageNum.value,
  })
  if (res.data.code === '0' && pageSize.value == 1) {
    tableList.value = res.data.data.data
  } else if (res.data.code === '0' && Number(pageSize.value) > 1) {
    res.data.data.data.forEach((el: any) => {
      tableList.value.push(el)
    })
  }
}
const load = () => {
  // 滚动更新
  getEquipmentLists()
  pageSize.value = Number(pageSize.value) + 1
}
const switchover = (index: number): void => {
  // 选项卡 点击
  tableControl.value = index
}
const presentLook = ref<number>(-1)
const lookCut = (index: number): void => {
  console.log(index)
  presentLook.value = index
}

onMounted(() => {
  getDetectorOneList()
  getWindLists()
  //   getEquipmentLists();
})
</script>

<style lang="less" scoped>
@import './detect.less';
</style>


